<template>
    <div>
        <el-card>
            <el-form :model="filters" ref="form1" label-position="right" label-width="90px" inline>
                <el-form-item label="机构全称" prop="mechanismFullName">
                    <div class="filters-input">
                        <el-input v-model="filters.mechanismFullName" placeholder="机构全称" />
                    </div>
                </el-form-item>

                <el-form-item>
                    <Button type="primary" icon="ios-search" size="large" @click="loadData">搜索</Button>
                </el-form-item>
            </el-form>
            <el-button type="primary" icon="md-add" size="large" @click="OpenAdd">新增</el-button>
        </el-card>
        <el-table stripe border :loading="tableLoading" :data="tableData" size="large" ref="table" style="width: 100%">
            <template slot="empty">暂无数据</template>
            <el-table-column prop="mechanismCode" label="机构编码"></el-table-column>
            <el-table-column prop="mechanismFullName" label="机构全称"></el-table-column>
            <el-table-column prop="mechanismAbbreviation" label="机构简称"></el-table-column>
            <el-table-column prop="legalRepresentative" label="法定代表人"></el-table-column>
            <el-table-column prop="registeredCapital" label="注册资金"></el-table-column>
            <el-table-column prop="unifiedSocialCreditCode" label="统一社会信用代码"></el-table-column>
            <el-table-column prop="registrationNumber" label="注册号"></el-table-column>
            <el-table-column prop="organizationalCodeNumber" label="组织机构代码号"></el-table-column>
            <el-table-column prop="socialCreditCode" label="社会信用代码"></el-table-column>
            <el-table-column prop="managementState" label="经营状态"></el-table-column>
            <el-table-column prop="enterpriseType" label="企业类型"></el-table-column>
            <el-table-column prop="establishmentDate" label="成立日期" :formatter="dateFormat"></el-table-column>
            <!--<el-table-column prop="issueDate" label="发照日期" :formatter="dateFormat"></el-table-column>-->
            <el-table-column prop="registrationAuthority" label="登记机关"></el-table-column>
            <el-table-column prop="businessTerm" label="营业期限"></el-table-column>
            <el-table-column prop="businessScope" label="经营范围"></el-table-column>
            <el-table-column prop="residence" label="住所"></el-table-column>
            <el-table-column prop="telephone" label="机构电话"></el-table-column>
            <el-table-column prop="lxName" label="联系人"></el-table-column>
            <el-table-column prop="lxPhone" label="联系电话"></el-table-column>
            <el-table-column prop="website" label="网址">
                <template slot-scope="scope">
                    <a target="_blank" :href="scope.row.website">网址</a>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="150" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="handleAdd(scope.row)">修改</el-button>
                    <el-button size="mini" type="danger" @click="openDelete(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :visible.sync="addVisible" :close-on-click-modal="false" width="900px">
            <el-form :model="adds" ref="form" :rules="rules" label-width="150px">
                <el-form-item label="机构编码" prop="mechanismCode">
                    <el-input v-model="adds.mechanismCode" placeholder="纯数字从1开始排"/>
                </el-form-item>
                <el-form-item label="机构全称" prop="mechanismFullName">
                    <el-input v-model="adds.mechanismFullName"/>
                </el-form-item>
                <el-form-item label="机构简称">
                    <el-input v-model="adds.mechanismAbbreviation"/>
                </el-form-item>
                <el-form-item label="法定代表人" prop="legalRepresentative">
                    <el-input v-model="adds.legalRepresentative"/>
                </el-form-item>
                <el-form-item label="注册资金" prop="registeredCapital">
                    <el-input v-model="adds.registeredCapital"/>
                </el-form-item>
                <el-form-item label="统一社会信用代码">
                    <el-input v-model="adds.unifiedSocialCreditCode"/>
                </el-form-item>
                <el-form-item label="注册号">
                    <el-input v-model="adds.registrationNumber"/>
                </el-form-item>
                <el-form-item label="组织机构代码号">
                    <el-input v-model="adds.organizationalCodeNumber"/>
                </el-form-item>
                <el-form-item label="社会信用代码">
                    <el-input v-model="adds.socialCreditCode"/>
                </el-form-item>
                <el-form-item label="经营状态">
                    <el-input v-model="adds.managementState"/>
                </el-form-item>
                <el-form-item label="企业类型" prop="enterpriseType">
                    <el-input v-model="adds.enterpriseType"/>
                </el-form-item>
                <el-form-item label="成立日期" prop="establishmentDate">
                    <DatePicker v-model="adds.establishmentDate" style="width: 100%;"></DatePicker>
                </el-form-item>
                <el-form-item label="发照日期" prop="issueDate">
                    <DatePicker v-model="adds.issueDate" style="width: 100%;"></DatePicker>
                </el-form-item>
                <el-form-item label="登记机关">
                    <el-input v-model="adds.registrationAuthority"/>
                </el-form-item>
                <el-form-item label="营业期限" prop="businessTerm">
                    <el-input v-model="adds.businessTerm"/>
                </el-form-item>
                <el-form-item label="经营范围" prop="businessScope">
                    <el-input v-model="adds.businessScope"/>
                </el-form-item>
                <el-form-item label="住所" prop="residence">
                    <el-input v-model="adds.residence"/>
                </el-form-item>
                <el-form-item label="机构电话" prop="telephone">
                    <el-input v-model="adds.telephone"/>
                </el-form-item>
                <el-form-item label="联系人">
                        <el-input v-model="adds.lxName"/>
                </el-form-item>
                <el-form-item label="联系电话">
                        <el-input v-model="adds.lxPhone"/>
                </el-form-item>
                <el-form-item label="网址">
                    <el-input v-model="adds.website"/>
                </el-form-item>
                <el-form-item label="企业证照">
                    <el-upload
                        @click.native="uploadImgName()"
                        :headers="{'x-access-token':token}"
                        :action="act"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :data="uploadImgData"
                        :disabled="disabled"
                        :multiple="false"
                        :file-list="fileList"
                        :on-success="handleAvatarSuccess"
                        list-type="picture">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <Button type="text" size="large" @click="onCancel">取消</Button>
                <Button type="primary" size="large" @click="handleSubmit">确定</Button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import DatePicker from "element-ui/lib/date-picker";
    import moment from "moment";
    import baseURL from '_conf/url'
    import Cookies from 'js-cookie'
    import {TOKEN_KEY} from '@/libs/util'

    const token = Cookies.get(TOKEN_KEY)
    const act=baseURL+"/common/uploadImg";

    export default {
        components: {DatePicker},
        data(){
          return{
              token:token,
              pageNum: 1,
              pageSize: 10,
              pageTotal: 0,
              act:act,

              uploadImgData:{},
              filters:{},
              adds:{},
              rules:{
                  mechanismCode:[{
                      required: true,
                      message: "请输入机构编码",
                  }],
                  mechanismFullName:[{
                      required: true,
                      message: "请输入机构全称",
                  }],
                  legalRepresentative:[{
                      required: true,
                      message: "请输入法定代表人",
                  }],
                  registeredCapital:[{
                      required: true,
                      message: "请输入注册资金",
                  }],
                  enterpriseType:[{
                      required: true,
                      message: "请输入企业类型",
                  }],
                  establishmentDate:[{
                      required: true,
                      message: "请输入成立日期",
                  }],
                  issueDate:[{
                      required: true,
                      message: "请输入发照日期",
                  }],
                  businessTerm:[{
                      required: true,
                      message: "请输入营业期限",
                  }],
                  businessScope:[{
                      required: true,
                      message: "请输入经营范围",
                  }],
                  residence:[{
                      required: true,
                      message: "请输入住所",
                  }],
                  telephone:[{
                      required: true,
                      message: "请输入电话",
                  }],
              },

              tableData:[],
              fileList:[],

              tableLoading:false,
              addVisible:false,
              disabled:true,
          }
        },

        created:function(){
            this.loadData();
        },

        methods:{
            loadData:function(){
                this.tableLoading=true;
                this.filters.pageNum=this.pageNum;
                this.filters.pageSize=this.pageSize;
                this.postRequest("/api/mechanisms/loadData",this.filters).then(resp=>{
                    if (resp.code == 20000){
                        this.tableData=resp.data.list;
                        this.pageTotal=resp.total;
                        this.tableLoading=false;
                    }
                });
            },
            OpenAdd:function () {
                this.adds={}
                this.addVisible=true;
            },
            handleAdd:function(row){
                this.adds=row
                this.addVisible=true;
            },
            uploadImgName:function(){
                const name=this.adds.mechanismFullName;
                if (!name){
                    this.disabled = true;
                    this.$Message.warning('请先填写机构全称！');
                    return
                } else {
                    this.uploadImgData={
                        fileName: "contractMechanism/"+name,
                    }
                    this.disabled =false;
                }
            },
            handlePreview:function () {

            },
            handleRemove:function () {

            },
            handleAvatarSuccess:function (res, file) {
                this.adds.corporateLicensePic=res;
            },
            handleSubmit:function(){
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        this.formLoading = true;
                        this.save();
                    }
                });
            },
            save:function(){
                this.adds.establishmentDate=moment(this.adds.establishmentDate).format("YYYY-MM-DD");
                this.adds.issueDate=moment(this.adds.issueDate).format("YYYY-MM-DD");
                this.postRequest("/api/mechanisms/mechanism",this.adds).then(resp=>{
                    console.info(resp);
                    if (resp.code==20000){
                        this.$Message.success("新增成功");
                        this.addVisible=false;
                        this.loadData();
                    }
                });
            },
            openDelete:function(id){
                this.$Modal.confirm({
                    title: "提示",
                    content: "确定删除该条记录？",
                    onOk: () => {
                        this.getRequest("/api/mechanisms/delete?id="+id).then(resp=>{
                            if (resp.code==20000){
                                this.$Message.success("删除成功");
                                this.loadData();
                            }
                        });
                    },
                    onCancel: () => {
                        // this.$Message.info('Clicked cancel');
                    }
                });
            },
            onCancel:function () {
                this.addVisible=false;
            },
            dateFormat:function (row,column) {
                let date = row[column.property];
                if (date == undefined) {
                    return "";
                }
                return moment(date).format("YYYY-MM-DD");
            },
        }
    }
</script>

